<!-- <template>
  <div class="app-container">
    <el-table
      v-loading="listLoading"
      :data="list"
      element-loading-text="Loading"
      border
      fit
      highlight-current-row
    >
      <el-table-column align="center" label="ID" width="95">
        <template slot-scope="scope">
          {{ scope.$index }}
        </template>
      </el-table-column>
      <el-table-column label="信息">
        <template slot-scope="scope">
          {{ scope.row.title }}
        </template>
      </el-table-column>
      <el-table-column label="名称" width="110" align="center">
        <template slot-scope="scope">
          <span>{{ scope.row.author }}</span>
        </template>
      </el-table-column>
      <el-table-column label="班级号" width="110" align="center">
        <template slot-scope="scope">
          {{ scope.row.pageviews }}
        </template>
      </el-table-column>
      <el-table-column class-name="status-col" label="按键" width="110" align="center">
        <template slot-scope="scope">
          <el-tag :type="scope.row.status | statusFilter">{{ scope.row.status }}</el-tag>
        </template>
      </el-table-column>
      <el-table-column align="center" prop="created_at" label="时间" width="200">
        <template slot-scope="scope">
          <i class="el-icon-time" />
          <span>{{ scope.row.display_time }}</span>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
import { getList } from '@/api/table'

export default {
  filters: {
    statusFilter(status) {
      const statusMap = {
        published: 'success',
        draft: 'gray',
        deleted: 'danger'
      }
      return statusMap[status]
    }
  },
  data() {
    return {
      list: null,
      listLoading: true
    }
  },
  created() {
    this.fetchData()
  },
  methods: {
    fetchData() {
      this.listLoading = true
      getList().then(response => {
        this.list = response.data.items
        this.listLoading = false
      })
    }
  }
}
</script> -->



<template>
  <div class="app">

    <el-main>
      <div class="inputbox">
        编码:<el-input size="mini" v-model="page.yonghuming"  ></el-input>
        名称:
        <el-input size="mini" v-model="page.xingming"></el-input>
        客户分类
        <el-select size="mini" v-model="page.xingbie1" placeholder="请选择">
          <el-option label="请选择" value="请选择"></el-option>
         
        </el-select>
        客户等级
        <el-select size="mini" v-model="page.xingbie" placeholder="请选择">
          <el-option label="请选择" value="请选择"></el-option>
          <el-option label="一级" value="一级"></el-option>
          <el-option label="二级" value="二级"></el-option>
        </el-select>
        纳税规模：
        <el-select size="mini" v-model="page.xingbie2" placeholder="请选择">
          <el-option label="请选择" value="请选择"></el-option>
          <el-option label="一般纳税人" value="一般纳税人"></el-option>
        </el-select>

        所属地区:
        <div class="block">
         
          <el-cascader v-model="value" size="mini" :options="options" @change="handleChange" placeholder="请选择"></el-cascader>
        </div>
        
        业务区域：
        <div class="block">
         
         <el-cascader v-model="value1" size="mini" :options="options" @change="handleChange" placeholder="请选择"></el-cascader>
       </div>
        <el-button class="query" slot="append" icon="el-icon-search" size="mini" @click="getlist">查询</el-button>
      </div>
      <div class="resp">
        <el-button type="primary"   icon="el-icon-plus" @click="add">新增</el-button>
        <el-button type="primary"   icon="el-icon-download">导入</el-button>
        <el-button type="primary"   icon="el-icon-plus">导出</el-button>
        已选择num项


        <el-button type="primary"   icon="el-icon-setting" class="lie">自定义列</el-button>
      </div>
      <template>
        <el-table :data="userlist" border style="width: 100%">
          <el-table-column prop="mima" label="全选"> </el-table-column>
          <el-table-column type="current" label="#"> </el-table-column>
          <el-table-column prop="code" label="名称"> </el-table-column>
          <el-table-column prop="auxName" label="助记名"> </el-table-column>
          <el-table-column prop="xingbie" label="分类"> </el-table-column>
          <el-table-column prop="customerLevel_dictText" label="等级"> </el-table-column>
          <el-table-column prop="taxScale_dictText" label="纳税规模"> </el-table-column>
         

          <el-table-column prop="headquarters" label="所属总公司"> </el-table-column>
          <el-table-column prop="youxiang" label="所属地区"> </el-table-column>
          <el-table-column prop="shenfenzheng" label="业务区域"></el-table-column>
          
          <el-table-column prop="address" label="客户地址"></el-table-column>
          <el-table-column prop="isEnabled_dictText" label="启用"> </el-table-column>
          <el-table-column prop="remark" label="备注"></el-table-column>
          <el-table-column prop="createBy_dictText" label="创建人"> </el-table-column>
          <el-table-column prop="shenfenzheng" label="修改时间"></el-table-column>
          <el-table-column prop="youxiang" label="修改人"> </el-table-column>
         
          

          <el-table-column label="操作">
            <template slot-scope="scope">
              <el-button type="primary">编辑</el-button>
              <el-button type="primary">更多^</el-button>
            </template>
          </el-table-column>
        </el-table>
      </template>
      <div class="pagebox inputbox">
        <div class="block">
          <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="page.page"
            :page-sizes="[10, 20, 50, 100]" :page-size="page.pagesize" layout="total, sizes, prev, pager, next, jumper"
            :total="Number(totalCount)">
          </el-pagination>
        </div>
      </div>
    </el-main>
  </div>
</template>

<script>
import { GetkehuList } from '@/api/lc';
export default {
  data() {
    return {
      value1:null,
      value: [],
        options: [{
          value: 'zhinan',
          label: '指南',
          children: [{
            value: 'shejiyuanze',
            label: '设计原则',
            children: [{
              value: 'yizhi',
              label: '一致'
            }, {
              value: 'fankui',
              label: '反馈'
            }, {
              value: 'xiaolv',
              label: '效率'
            }, {
              value: 'kekong',
              label: '可控'
            }]
          }, {
            value: 'daohang',
            label: '导航',
            children: [{
              value: 'cexiangdaohang',
              label: '侧向导航'
            }, {
              value: 'dingbudaohang',
              label: '顶部导航'
            }]
          }]
        }, {
          value: 'zujian',
          label: '组件',
          children: [{
            value: 'basic',
            label: 'Basic',
            children: [{
              value: 'layout',
              label: 'Layout 布局'
            }, {
              value: 'color',
              label: 'Color 色彩'
            }, {
              value: 'typography',
              label: 'Typography 字体'
            }, {
              value: 'icon',
              label: 'Icon 图标'
            }, {
              value: 'button',
              label: 'Button 按钮'
            }]
          }, {
            value: 'form',
            label: 'Form',
            children: [{
              value: 'radio',
              label: 'Radio 单选框'
            }, {
              value: 'checkbox',
              label: 'Checkbox 多选框'
            }, {
              value: 'input',
              label: 'Input 输入框'
            }, {
              value: 'input-number',
              label: 'InputNumber 计数器'
            }, {
              value: 'select',
              label: 'Select 选择器'
            }, {
              value: 'cascader',
              label: 'Cascader 级联选择器'
            }, {
              value: 'switch',
              label: 'Switch 开关'
            }, {
              value: 'slider',
              label: 'Slider 滑块'
            }, {
              value: 'time-picker',
              label: 'TimePicker 时间选择器'
            }, {
              value: 'date-picker',
              label: 'DatePicker 日期选择器'
            }, {
              value: 'datetime-picker',
              label: 'DateTimePicker 日期时间选择器'
            }, {
              value: 'upload',
              label: 'Upload 上传'
            }, {
              value: 'rate',
              label: 'Rate 评分'
            }, {
              value: 'form',
              label: 'Form 表单'
            }]
          }, {
            value: 'data',
            label: 'Data',
            children: [{
              value: 'table',
              label: 'Table 表格'
            }, {
              value: 'tag',
              label: 'Tag 标签'
            }, {
              value: 'progress',
              label: 'Progress 进度条'
            }, {
              value: 'tree',
              label: 'Tree 树形控件'
            }, {
              value: 'pagination',
              label: 'Pagination 分页'
            }, {
              value: 'badge',
              label: 'Badge 标记'
            }]
          }, {
            value: 'notice',
            label: 'Notice',
            children: [{
              value: 'alert',
              label: 'Alert 警告'
            }, {
              value: 'loading',
              label: 'Loading 加载'
            }, {
              value: 'message',
              label: 'Message 消息提示'
            }, {
              value: 'message-box',
              label: 'MessageBox 弹框'
            }, {
              value: 'notification',
              label: 'Notification 通知'
            }]
          }, {
            value: 'navigation',
            label: 'Navigation',
            children: [{
              value: 'menu',
              label: 'NavMenu 导航菜单'
            }, {
              value: 'tabs',
              label: 'Tabs 标签页'
            }, {
              value: 'breadcrumb',
              label: 'Breadcrumb 面包屑'
            }, {
              value: 'dropdown',
              label: 'Dropdown 下拉菜单'
            }, {
              value: 'steps',
              label: 'Steps 步骤条'
            }]
          }, {
            value: 'others',
            label: 'Others',
            children: [{
              value: 'dialog',
              label: 'Dialog 对话框'
            }, {
              value: 'tooltip',
              label: 'Tooltip 文字提示'
            }, {
              value: 'popover',
              label: 'Popover 弹出框'
            }, {
              value: 'card',
              label: 'Card 卡片'
            }, {
              value: 'carousel',
              label: 'Carousel 走马灯'
            }, {
              value: 'collapse',
              label: 'Collapse 折叠面板'
            }]
          }]
        }, {
          value: 'ziyuan',
          label: '资源',
          children: [{
            value: 'axure',
            label: 'Axure Components'
          }, {
            value: 'sketch',
            label: 'Sketch Templates'
          }, {
            value: 'jiaohu',
            label: '组件交互文档'
          }]
        },
      ],
      userlist: [],
      totalCount: "",
      page: {
        username: "",
        page: 1,
        pagesize: 10,
      },

      datalist: {
        _t: '',
        column: 'createTime',
          order: ' desc',
        field: 'id,,,code,name,auxName,customerCategory_dictText,customerLevel_dictText,taxScale_dictText,undefined,headquarters,area,bizArea,address,website,isEnabled_dictText,remark,createBy_dictText,updateTime,updateBy_dictText,action',
        pageNo: '1',
        pageSize: '10',
      },
    };
  },
  methods: {
    handleChange(){},
    add(){
      this.$router.push({
        path:'/add'
      })
    },
    handleSizeChange(val) {
        this.page.pagesize = val;
        this.page.page = 1;
        this.getlist();
      },
      handleCurrentChange(val) {
        this.page.page = val;
        this.getlist();
      },
  async getlist(){
    let res = await GetkehuList(this.datalist)
    console.log(res)
    this.userlist = res.result.records
    console.log(this.userlist);
    
    }
  },
  mounted(){
    this.getlist();
  },
};
</script>

<style scoped>
.app {
  padding-top: 20px;
}

.el-header {
  background: linear-gradient(90deg, #2ebf91, #8360c3);
  color: #fff;
  padding: 5px 10px;
  height: 55px !important;
}

.head {
  width: 180px;
  line-height: 25px;
  box-sizing: border-box;
  border-radius: 8px;
  text-align: center;
  font-size: 16px;
  padding: 10px;
  background: hsla(0, 0%, 100%, 0.2);
}

.inputbox {
  background: #f2f2f2;
  padding: 12px 8px;
  margin-bottom: 20px;
  box-sizing: border-box;
  color: #606266;
  font-size: 14px;
}

.el-main {
  background-color: #fff;
}

.el-input,
.el-input__inner,
.el-select {
  border-color: #c0c4cc;
  border-radius: 4px;
  padding: 0 15px;
  width: 278px !important;

  box-sizing: border-box;
}

.query {
  width: 82px;
  height: 32px;
  margin-left: 20px;
  color: #fff;
  background-color: #1890ff;
  border-color: #1890ff;
}

.pagebox {
  margin-top: 10px;
  display: flex;
  justify-content: flex-end;
}
.block{
  display: inline-block;
}
.resp{
  width: 100%;
  margin-top: 8px;
  float: left;
  margin-bottom: 10px;
  .lie{
    float: right;
  }
}
</style>
  